/**
 * 给元素绑定滚动条
 * @param {*} viewEle 溢出隐藏的父元素 absloute
 * @param {*} moveEle 在父元素里和滚动条同步运动的子元素 relative 有固定高度
 * @param {*} scrollEle 滚动条元素，必须是我们这里定义的 absloute
 * 
 * <div class="myscorll scroll-1">
        <div class="ball"></div>
        <div class="way"></div>
    </div>
    
    样式请引入 component-myscorll.css
 */
function bindscorllBar(viewEle, moveEle, scrollEle) {

    var viewHeight = viewEle.offsetHeight;
    var contentHeight = moveEle.offsetHeight;
    var ball1 = scrollEle.childNodes[0];
    var rate = 0.0;
    console.log(`可视区高度是${viewHeight}内部滚动高度是${contentHeight}`);
    /**
     * 此处拖动代码参考了
     * https://blog.csdn.net/qq_36338787/article/details/81947790
     * @param {*} obj 
     */
    function drap(obj) {
        obj.addEventListener('mousedown', start);
        function start(event) {
            // 鼠标左键
            if (event.button == 0) {
                // 如果有obj有margin值而不加这个数组拖拽会出现位置偏移
                offsetX = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj)['margin-left']);
                offsetY = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj)['margin-top']);
                // 绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在
                //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
                document.addEventListener('mousemove', move);
                //此处的$(document)可以改为obj
                document.addEventListener('mouseup', stop);
            }
            return false;//阻止默认事件或冒泡
        }
        function move(event) {
            // 锁定左右不能移动
            obj.style.left = obj.style.left + 'px';
            // console.log(obj.offsetTop);
            // 检测是否超出边界
            if (obj.offsetTop < 0) {
                // 不能往上移动了
                obj.style.top = '0px';
            } else if (obj.offsetTop > scrollEle.offsetHeight) {
                // 不能往下移动了
                obj.style.top = scrollEle.offsetHeight + 'px';
            } else {
                // 只能上下移动
                obj.style.top = (event.pageY - offsetY) + 'px';
            }
            rate = ball1.offsetTop / scrollEle.offsetHeight;
            // 移动可视界面
            moveEle.style.top = - rate * (contentHeight - viewHeight) + "px";
            return false; //阻止默认事件或冒泡
        }
        function stop(envet) {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', stop);
        }
    }
    drap(ball1);
}